<template>
    <div class="carrier_wrapper">
        <el-form label-width="110px" :model="ruleForm" label-position="right" :disabled="detailMode" class="info_form"
            :rules="rules" ref="ruleForm">
            <el-form-item label="公司名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入您的公司名称"></el-input>
            </el-form-item>
            <el-form-item label="营业执照" prop="bussiness_license_number">
                <el-input v-model="ruleForm.bussiness_license_number" placeholder="请输入营业执照号码"></el-input>
            </el-form-item>
            <el-form-item label="营业执照附件" prop="bussiness_license" ref="imgRef0">
                <!-- <el-input v-model="ruleForm.bussiness_license"  placeholder="请上传营业执照"></el-input> -->
                <el-upload class="upload-demo" :limit="1" :on-exceed="handleExceed" :on-change="handleChangeFile" action="" :auto-upload="false"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="file" slot-scope="{ file }">
                        <li class="el-upload-list__item is-success">
                            <a @click="() => openUrl(file)" class="el-upload-list__item-name">
                                <i class="el-icon-document"></i>{{ file.name }}
                            </a>
                            <label class="el-upload-list__item-status-label">
                                <i class="el-icon-upload-success el-icon-circle-check"></i>
                            </label>
                            <i @click.stop="handleRemoveFile(file)" class="el-icon-close" :disabled='detailMode'></i>
                        </li>
                    </div>
                </el-upload>
            </el-form-item>
            <el-form-item label="联系人" prop="header">
                <el-input v-model="ruleForm.header" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="header_phone">
                <el-input v-model="ruleForm.header_phone" placeholder="请输入你的联系方式"></el-input>
            </el-form-item>
            <el-form-item label="选择承接区域" prop="region">
                <el-cascader popper-class="col" style="width: 190px;" :options="areaData2" filterable clearable
                    v-model="ruleForm.region" placeholder="请选择您可以承运的区域" :props="{
                        value: 'id',
                        label: 'name',
                        multiple: true,
                        children: 'next_level_data',
                    }" @change="handleChangeArea"></el-cascader>
            </el-form-item>
        </el-form>
        <div v-if="detailMode" style="margin-top: 40px; text-align: right;">
            <el-button type="primary" @click="handleEdit">编辑</el-button>
        </div>
        <div v-if="!detailMode" style="margin-top: 40px; text-align: right;">
            <el-button data-tracker="P65-8" @click="handleClose">取 消</el-button>
            <el-button data-tracker="P65-7" type="primary" @click="handleOk">确 定</el-button>
        </div>
    </div>
</template>

<script>
import {
    uploading,
} from "@/page/material/common/common";
import { regionList } from "@/page/material/common/common";
import { CarrierRegister } from "@/api/user";
import {
    CustomerDetail,
    CustomerUpdate,
} from "@/api/customer";
export default {
    name: 'carrier',
    components: {},
    props: ['id', 'mode'],
    data() {
        return {
            ruleForm: {
                name: "",//公司名称
                bussiness_license_number: "", //营业执照
                bussiness_license: "",// 营业执照附件
                header: "",// 联系人
                header_phone:"",//联系方式
                region: []
            },
            rules: {
                name: [
                    { required: true, message: "请填写公司名称", trigger: "blur" },
                ],
                bussiness_license_number: [
                    { required: true, message: "请填写营业执照", trigger: "blur" },
                ],
                bussiness_license: [
                    { required: true, message: "请上传营业执照附件", trigger: "change" },
                ],
                header: [
                    { required: true, message: "请输入联系人", trigger: "blur" },
                ],
                header_phone: [
                    { required: true, message: "请输入联系方式", trigger: "blur" },
                ],
                region: [
                    { required: true, message: "请选择承接区域", trigger: "change" },
                ],
            },
            fileList: [],
            areaData2: []
        };
    },
    computed: {
        detailMode() {
            return this.mode === 'detail';
        }
    },
    watch: {
        "ruleForm.bussiness_license": function (val) {
            this.$refs.imgRef0.clearValidate()
        },
    },
    mounted() {
        regionList(0).then((res) => {
            const data = res.data;
            data.forEach((item) => {
                item.next_level_data.forEach((iten) => {
                    iten.next_level_data = undefined;
                });
            });
            this.areaData2 = data;

        });
        if (this.mode === 'add') {
            CustomerDetail({ id: this.id }).then(res => {
                const data = res.data;
                if (data) {
                    this.ruleForm.name = data.name,//公司名称
                    this.ruleForm.bussiness_license_number = data.business_license == '0' ? '' : data.business_license, //营业执照
                    this.ruleForm.header = data.head,// 联系人
                    this.ruleForm.header_phone = data.head_mobile,//联系方式
                    this.ruleForm.region = [[data.province_id * 1, data.city_id * 1]];
                }
            });
        }

    },
    methods: {
        async handleChangeFile(file) {
            var filelist = file.raw; //文件
            var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
            const result = await uploading(filelist, filename, 30);
            var filehttp = "http://oss.dushisc.com/";
            this.fileList.push({
                name: filehttp + result.name,
                url: filehttp + result.name,
            });
            this.ruleForm.bussiness_license = filehttp + result.name;
        },

        handleRemoveFile(file) {
            this.fileList = [];
            this.ruleForm.bussiness_license = "";
        },
        openUrl(file) {
            window.open(file.name);
        },
        handleChangeArea() {

        },
        handleEdit() {
            this.$emit('modeChange', 'edit');
        },
        handleExceed(){
            this.$message({
                type: "warning",
                message: "最多可上传一个",
            });
        },
        handleOk() {
            this.$refs['ruleForm'].validate((valid) => {
                if (!valid) return;
                CarrierRegister(this.ruleForm).then(res => {
                    if (res.code === 10000) {
                        const loading = this.$loading({
                            lock: true,
                            text: '正在升级中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        setTimeout(() => {
                            loading.close();
                            this.$emit('ok');
                        }, 3000);
                    }
                });
            });

        },
        handleClose() {
            this.$emit('cancel');
        },
    },
};
</script>
<style lang="scss" scoped>
.carrier_wrapper {
    // padding-right: 40px;
    width: 350px;

    .info_form {
        /deep/.el-form-item__content .el-input {
            width: 200px;
        }
    }
}
</style>